import React from "react";
import {
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Box,
  Text,
  useColorModeValue
} from "@chakra-ui/core";
import SignUp from "./SignUp";
import SignIn from "./SignIn";

export default function Form() {
  const bgColor = useColorModeValue('white', 'gray.700');
  return (
    <Box mx="auto" bgColor={bgColor} w="400px" p="35px" boxShadow="lg" borderRadius="lg" color="gray.500">
      <Tabs>
        <TabList w="180px" mx="auto" mb="30px" borderColor="white">
          <Tab fontSize="18px" _selected={{ color:"tomato", borderBottom:"2px solid tomato", fontWeight:"700" }} _focus={{ boxShadow: "none" }}>登录</Tab>
          <Text fontWeight="bold" m="10px">.</Text>
          <Tab fontSize="18px" _selected={{ color:"tomato", borderBottom:"2px solid tomato", fontWeight:"700" }} _focus={{ boxShadow: "none" }}>注册</Tab>
        </TabList>
        <TabPanels fontSize="12px">
          <TabPanel>
            <SignIn />
          </TabPanel>
          <TabPanel>
            <SignUp />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}
